<template>
	<view class="dialogue-detail">
		<titleName :name="name" :backShow="true"></titleName>
		<scroll-view class="container" scroll-y="true" :scroll-into-view="targetIds">
			<view v-for="item in dataList" :key="item.id" :id="'item'+item.id">
				<view class="message" v-if="item.usertype==1">
					<view class="time">{{item.committime}}</view>
					<view class="main-msg">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/touxiang.png"
							mode=""></image>
						<view class="msg">
							{{item.content}}
						</view>
					</view>
				</view>
				<view class="message right" v-if="item.usertype==9">
					<view class="time">{{item.committime}}</view>
					<view class="main-msg">
						<view class="msg">
							{{item.content}}
						</view>
						<image :src="resourceUrl+'zixun-user-icon.png'" mode=""></image>
					</view>
				</view>
			</view>

		</scroll-view>

		<view class="btm-wrap">
			<view class="content">
				<view class="ipt-wrap">
					<input type="text" @confirm="sendMsg" v-model="iptVal" placeholder="输入您要回复的文字内容"
						placeholder-class="ph-color" />
				</view>
				<image @click="showUploadImage=!showUploadImage" :src="resourceUrl+'plus.png'" mode=""></image>
			</view>
			<view class="upload-wrap" v-if="showUploadImage">
				<view class="img">
					<image :src="resourceUrl+'upload-img.png'" mode=""></image>
					<text>相册</text>
				</view>
				<view class="camera">
					<image :src="resourceUrl+'camera.png'" mode=""></image>
					<text>拍照</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import {
		resourceUrl
	} from '../../request/config'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	let enterpriseid = ref('')
	let name = "环保咨询"
	let showUploadImage = ref(false)
	let iptVal = ref('')

	let dataList = ref([])
	let targetIds = ref('')
	let sendMsg = () => {
		http({
			url: '/greenChatRecord/addChatRecord',
			data: {
				enterpriseid: enterpriseid.value,
				content: iptVal.value
			}
		}).then((res) => {
			if (res.code == 0) {
				iptVal.value = ''
				getList()
			}
		})
	}
	onLoad((e) => {
		enterpriseid.value = e.enterpriseid
		getList()
	})
	let getList = () => {

		http({
			url: "/greenChatRecord/datalist",
			data: {
				enterpriseid: enterpriseid.value
			}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
				targetIds.value = 'item' + dataList.value[dataList.value.length - 1].id
			}
		})
	}
</script>

<style lang="scss" scoped>
	.dialogue-detail {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		:deep(.ph-color) {

			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #B3B3BC;


		}

		.container {
			width: 100vw;
			height: calc(100vh - 160upx - 50upx - 184upx);
			background: #F2F2F4;
			padding-top: 26upx;
			padding-bottom: 20upx;

			.message:first-child {
				margin-top: 0upx;
			}

			.message.right {
				padding-right: 45upx;

				.main-msg {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					image {
						width: 81rpx;
						height: 81rpx;
						align-self: flex-start;
						float: right;
						margin-left: 22upx;
					}

					.msg {
						width: 507rpx;
						background: #0874FA;
						border-radius: 21rpx 7rpx 21rpx 21rpx;
						margin-left: 22upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						padding: 22upx 0 22upx 27upx;

						line-height: 48upx;
					}
				}
			}

			.message {
				margin-top: 48upx;
				margin-bottom: 20upx;

				.time {
					text-align: center;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin: 0upx 0 15upx 0;
				}

				.main-msg {
					display: flex;
					align-items: center;
					padding-left: 30upx;

					image {
						width: 81rpx;
						height: 81rpx;
						align-self: flex-start
					}

					.msg {
						width: 507rpx;

						background: #FFFFFF;
						border-radius: 7rpx 21rpx 21rpx 21rpx;
						margin-left: 22upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						padding: 22upx 0 22upx 27upx;

						line-height: 48upx;
					}
				}
			}
		}

		.btm-wrap {
			width: 750rpx;
			// height: 177rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			align-items: center;
			padding-top: 58upx;
			padding-bottom: 50upx;

			.upload-wrap {
				display: flex;
				align-items: center;
				margin-top: 47upx;
				padding-left: 37upx;

				.img {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 38upx;

					image {
						width: 142upx;
						height: 142upx;

					}

					text {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #B3B3BC;
						margin-top: 16upx;
					}
				}

				.camera {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 142upx;
						height: 142upx;

					}

					text {
						margin-top: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #B3B3BC;

					}
				}
			}

			.content {
				padding: 0 34upx 0 37upx;
				display: flex;
				align-items: center;

				.ipt-wrap {
					width: 599rpx;
					height: 77rpx;
					background: #F2F2F4;
					border-radius: 14rpx;
					display: flex;
					justify-content: space-between;

					input {
						width: 100%;
						height: 77rpx;
						padding-left: 34upx;
					}


				}

				image {
					width: 54upx;
					height: 54upx;
					margin-left: 25upx;
				}
			}
		}





	}
</style>